<template>
  <div class="relax-container">
    <div class="content-wrapper">
      <!-- 笑话部分 -->
      <div class="jokes-section">
        <div class="joke-header">
          <h2>轻松一刻</h2>
          <div class="meta-info">
            <span>看几个笑话，放松一下吧！</span>
          </div>
        </div>
        <div class="jokes-container">
          <div
            v-for="(joke, index) in currentJokes"
            :key="joke.id"
            class="joke-item"
            @click="selectJoke(index)"
          >
            <div class="joke-content">
              {{ joke.content }}
            </div>
            <div class="joke-meta">
              <span class="comment-count"
                >{{ commentCounts[index] }} 条评论</span
              >
            </div>
          </div>
        </div>
        <button @click="refreshJokes">刷新笑话</button>
      </div>

      <!-- 分隔线 -->
      <hr />

      <!-- 放松段落部分 -->
      <div class="paragraphs-section">
        <div class="joke-header">
          <h2>放松段落</h2>
          <div class="meta-info">
            <span>读几段放松段落，舒缓心情吧！</span>
          </div>
        </div>
        <div class="paragraphs-container">
          <div
            v-for="(paragraph, index) in currentParagraphs"
            :key="index"
            class="joke-item"
          >
            <div class="joke-content">
              {{ paragraph }}
            </div>
          </div>
        </div>
        <button @click="refreshParagraphs">刷新段落</button>
      </div>
    </div>

    <!-- 评论区 -->
    <div class="comments-section" v-if="selectedJokeIndex !== -1">
      <h2 class="comments-title">
        评论区 - {{ currentJokes[selectedJokeIndex].content }}
      </h2>
      <CommentList
        :jokeIndex="selectedJokeIndex"
        :jokeId="currentJokes[selectedJokeIndex].id"
        @commentAdded="updateCommentCount"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import CommentList from "./CommentList.vue";
import axios from "axios";
export default defineComponent({
  components: {
    CommentList,
  },

  setup() {
    // 用于存储当前显示的十条随机笑话
    const currentJokes = ref<any[]>([]);
    // 用于存储当前显示的五条随机放松段落
    const currentParagraphs = ref<string[]>([]);
    // 模拟点赞数
    const likeCounts = ref<number[]>(Array(10).fill(0));
    // 模拟评论数
    const commentCounts = ref<number[]>(Array(10).fill(0));
    // 存储当前选中的笑话索引
    const selectedJokeIndex = ref(-1);

    // 定义令人放松的段落
    const relaxingParagraphs: string[] = [
      "在一片宁静的森林里，阳光透过树叶的缝隙洒下，形成一片片光斑。鸟儿在枝头欢快地歌唱，微风轻轻拂过，带来阵阵花草的清香。你可以静静地坐在树下，闭上眼睛，感受着这份宁静与美好，让身心得到彻底的放松。",
      "海边是一个让人放松的好地方。海浪一波波地涌来，拍打着沙滩，发出有节奏的声响。你可以光着脚走在沙滩上，感受着细沙从脚趾间流过，看着远处的海平面，心中的烦恼仿佛都被海浪带走了。",
      "泡在温暖的温泉里，热气腾腾的泉水包围着你，所有的疲惫都在这一刻消散。周围是宁静的自然环境，也许还有鸟儿的歌声和树叶的沙沙声。闭上眼睛，放松全身的肌肉，享受这份舒适和惬意。",
      "坐在窗前，泡一杯热茶，看着窗外的风景。阳光柔和地洒在大地上，行人慢悠悠地走着，车辆也不紧不慢地行驶着。时光仿佛在这里放慢了脚步，你可以静静地品味着茶香，思考着生活中的美好。",
      "走进一片花海，五彩斑斓的花朵竞相开放，散发着迷人的香气。蝴蝶在花丛中翩翩起舞，蜜蜂忙碌地采集着花蜜。你可以漫步在花丛中，与大自然亲密接触，感受着生命的活力和美好，让自己的心灵得到滋养。",
      "在一个安静的午后，找一个舒适的角落，读一本喜欢的书。书中的文字仿佛有一种魔力，能够带你进入一个全新的世界。你可以沉浸在故事中，忘却一切烦恼和压力，让自己的身心得到放松和愉悦。",
      "听着轻柔的音乐，躺在柔软的沙发上，让自己的身体完全放松下来。音乐就像一股清泉，流淌在你的心间，带走所有的疲惫和焦虑。你可以闭上眼睛，尽情地享受这份宁静和美好。",
      "在瑜伽垫上，做着各种舒缓的动作，调整着呼吸。每一个动作都让你的身体得到拉伸和放松，每一次呼吸都让你的心灵得到净化。在这个过程中，你可以感受到身体和心灵的和谐统一，让自己的状态达到最佳。",
      "和朋友一起坐在草地上，谈天说地，分享彼此的生活和快乐。阳光洒在身上，微风轻轻拂过，笑声在空气中回荡。这种轻松愉快的氛围能够让你忘却一切烦恼，让自己的心情变得格外舒畅。",
      "夜晚，躺在柔软的床上，看着窗外的星星。月光洒在房间里，营造出一种宁静而浪漫的氛围。你可以慢慢地闭上眼睛，放松全身的肌肉，让自己在这片宁静中进入甜美的梦乡。",
    ];

    // 生成五条随机放松段落的函数
    const generateRandomParagraphs = () => {
      const shuffledParagraphs = relaxingParagraphs.sort(
        () => 0.5 - Math.random()
      );
      currentParagraphs.value = shuffledParagraphs.slice(0, 5);
    };

    // 刷新笑话的函数
    const refreshJokes = async () => {
      try {
        const response = await axios.get(
          "http://localhost:3000/api/get-jokes-with-comment-count"
        );
        if (response.data.success) {
          currentJokes.value = response.data.jokes;
          likeCounts.value = Array(currentJokes.value.length).fill(0);
          commentCounts.value = currentJokes.value.map((joke) =>
            parseInt(joke.comment_count)
          );
        }
        selectedJokeIndex.value = -1; // 刷新笑话时隐藏评论区
      } catch (error) {
        console.error("获取笑话出错:", error);
      }
    };

    // 刷新段落的函数
    const refreshParagraphs = () => {
      generateRandomParagraphs();
    };

    // 选择笑话的函数
    const selectJoke = (index: number) => {
      selectedJokeIndex.value = index;
    };

    const updateCommentCountsFromServer = async () => {
      if (selectedJokeIndex.value !== -1) {
        try {
          const jokeId = currentJokes.value[selectedJokeIndex.value].id;
          const response = await axios.get(
            `http://localhost:3000/api/get-comments/${jokeId}`
          );
          if (response.data.success) {
            commentCounts.value[selectedJokeIndex.value] =
              response.data.comments.length;
          }
        } catch (error) {
          console.error("获取评论数量出错:", error);
        }
      }
    };

    const updateCommentCount = () => {
      updateCommentCountsFromServer;
    };

    // 组件挂载时生成随机笑话和放松段落
    onMounted(async () => {
      await refreshJokes();
      generateRandomParagraphs();
    });

    return {
      currentJokes,
      currentParagraphs,
      refreshJokes,
      refreshParagraphs,
      likeCounts,
      commentCounts,
      selectedJokeIndex,
      selectJoke,
      updateCommentCount,
    };
  },
});
</script>

<style scoped>
.relax-container {
  display: flex;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.content-wrapper {
  flex: 2;
  margin-right: 20px;
}

.jokes-section,
.paragraphs-section {
  margin-bottom: 20px;
}

.joke-header {
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.joke-header h2 {
  font-size: 18px;
  margin: 0;
}

.meta-info {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

.jokes-container,
.paragraphs-container {
  margin-bottom: 10px;
}

.joke-item {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.joke-item:hover {
  background-color: #f0f0f0;
}

.joke-content {
  margin-bottom: 5px;
}

.joke-meta {
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.like-count::before {
  content: "👍 ";
  margin-right: 5px;
}

.comment-count::before {
  content: "💬 ";
  margin-right: 5px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

.comments-section {
  flex: 1;
  border-left: 1px solid #ccc;
  padding-left: 20px;
}

.comments-title {
  font-size: 16px;
  margin-bottom: 15px;
  color: #333;
}

.comment-item {
  display: flex;
  margin-bottom: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.comment-item:hover {
  transform: translateY(-3px);
}

.comment-avatar {
  margin-right: 10px;
}

.comment-avatar img {
  border-radius: 50%;
}

.comment-details {
  flex: 1;
}

.comment-nickname {
  font-weight: bold;
  margin-bottom: 3px;
  color: #555;
}

.comment-content {
  margin-bottom: 5px;
  color: #777;
}

.comment-time {
  font-size: 12px;
  color: #999;
}
</style>
